import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { useUserStore } from '@/stores/user'
import Layout from '@/layout/layout.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: '登录',
        requiresAuth: false // 该页面不需要登录权限
      }
    },
    {
      path: '/',
      component: Layout, // 这个路由渲染 Layout 组件
      meta: { requiresAuth: true }, // 整个组都需要登录
      children: [
        //它的 children
        {
          path: '', // 当访问 '/' 时，默认显示 HomeView
          name: 'home',
          component: HomeView,
          meta: { title: '首页' }
        },
        {
          path: 'about', // 当访问 '/about' 时，显示 AboutView
          name: 'about',
          component: () => import('../views/AboutView.vue'),
          meta: { title: '关于' }
        },
      ]
    },
  ],
})
router.beforeEach((to, from, next) => {
  // 在守卫内部获取 store 实例，确保是响应式的
  const userStore = useUserStore()

  // 1. 检查目标路由是否需要认证
  if (to.meta.requiresAuth) {
    // 如果需要认证，但用户未登录
    if (!userStore.isLoggedIn) {
      // 重定向到登录页
      next({
        path: '/login',
        // 在查询参数中保留用户想访问的页面，以便登录后能跳回
        query: { redirect: to.fullPath }
      })
    } else {
      // 如果已登录，直接放行
      next()
    }
  } else {
    // 2. 如果目标路由不需要认证 (例如 /login)

    // 如果用户已登录，且想访问登录页，则直接让他去首页
    if (userStore.isLoggedIn && to.path === '/login') {
      // 检查是否有 redirect 参数，如果有，则导向原目标页
      const redirect = to.query.redirect as string

      // 注意：这里使用 replace 更好，避免用户回退到 /login
      next(redirect || { path: '/' })

    } else {
      // 其他情况（未登录访问公开页），直接放行
      next()
    }
  }
})

router.beforeEach((to, from, next) => {
  // 在守卫内部获取 store 实例，确保是响应式的
  const userStore = useUserStore()

  // 1. 检查目标路由是否需要认证
  if (to.meta.requiresAuth) {
    // 如果需要认证，但用户未登录
    if (!userStore.isLoggedIn) {
      // 重定向到登录页
      next({
        path: '/login',
        // 在查询参数中保留用户想访问的页面，以便登录后能跳回
        query: { redirect: to.fullPath }
      })
    } else {
      // 如果已登录，直接放行
      next()
    }
  } else {
    // 2. 如果目标路由不需要认证 (例如 /login)

    // 如果用户已登录，且想访问登录页，则直接让他去首页
    if (userStore.isLoggedIn && to.path === '/login') {
      // 检查是否有 redirect 参数，如果有，则导向原目标页
      const redirect = to.query.redirect as string

      // 注意：这里使用 replace 更好，避免用户回退到 /login
      next(redirect || { path: '/' })

    } else {
      // 其他情况（未登录访问公开页），直接放行
      next()
    }
  }
})

export default router
